header .search input,
.focus .text,
.notice .not-content,
.hot-content .pro .flax,
.hot-content .pro .hover-fla {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.newslayer > p,
.notice .notlayer p,
.hot-content .pro .flax h2,
.hot-content .pro .flax p,
.hot-content .pro .hover-fla h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrapper {
  margin-bottom: 20px;
}

.content-tit {
  width: 100%;
  height: 66px;
  line-height: 66px;
  display: inline-block;
}

.content-tit .tit {
  font-size: 20px;
  line-height: 66px;
  color: #344163;
  padding-left: 20px;
}

.content-tit .tit small {
  font-size: 12px;
  color: #9299a9;
  text-transform: uppercase;
}

.content-tit .more {
  margin-right: 20px;
  font-size: 12px;
  padding-top: 2px;
}

header {
  margin-bottom: 20px;

  nav li{
    display: inline-block;
    position: relative;
    width: 100px;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    &:hover{
      background: #3d4157;
      a{
        color: #fff;
      }
      .navlist{
        display: block;
      }
    }
  }
}

header nav {
  background-color: #28292e;
  width: 100%;
  height: 44px;
  font-size: 0;
}

header nav a {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  line-height: 44px;
}

header nav li.active {
  background: #636f90;
}

header .top-content {
  height: 134px;
}

header .logo {
  display: block;
  margin-top: 36px;
}

header .search {
  width: 315px;
  height: 41px;
  padding-left: 7px;
  padding-top: 6px;
  background: #f1f4f9;
  border-radius: 0 0 3px 3px;
}

header .search input {
  width: 220px;
  height: 28px;
  border-radius: 3px;
  border: 0;
  font-size: 13px;
  padding-left: 24px;
  background-image: url();
  background-repeat: no-repeat;
  background-position: 8px 55%;
}

header .search button {
  height: 28px;
  width: 70px;
  border-radius: 3px;
  border: 0;
  color: #fff;
  font-size: 13px;
  margin-left: 6px;
  background-image: -webkit-linear-gradient(top, #858da3 10%, #66708b);
  background-image: -o-linear-gradient(top, #858da3 10%, #66708b);
  background-image: linear-gradient(to bottom, #858da3 10%, #66708b);
  background-color: #66708b;
}

header .search button:hover {
  background-image: -webkit-linear-gradient(top, #66708b 10%, #858da3);
  background-image: -o-linear-gradient(top, #66708b 10%, #858da3);
  background-image: linear-gradient(to bottom, #66708b 10%, #858da3);
  background-color: #858da3;
}

.focus {
  height: 282px;
  background: #495678;
}

.focus .focus-content {
  height: 236px;
  background: #344163;
  font-size: 0;
}

.focus .text {
  color: #fff;
  width: 556px;
  height: 100%;
  padding: 20px 38px;
  overflow: hidden;
}

.focus .text p {
  line-height: 175%;
  font-size: 14px;
}

.focus .text h1 {
  font-size: 30px;
  margin: 0;
  line-height: 140%;
  font-weight: 100;
  margin-bottom: 12px;
  margin-top: 16px;
}

.focus .picture {
  height: 100%;
  width: 544px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.focus .focus-foot a {
  font-size: 14px;
  color: #fff;
  line-height: 46px;
  margin-left: 40px;
}

.news {
  width: 734px;
  height: 580px;
  font-size: 0;
  background-color: #f1f4f9;
}

.news .news-image {
  width: 100%;
  height: 222px;
  overflow: hidden;
}

.news .news-image a {
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.news .news-image:hover a {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.news-content {
  padding: 20px;
}

.news-content ul {
  height: 254px;
  overflow: hidden;
}

.newslayer {
  display: block;
  line-height: 35px;
  height: 35px;
  font-size: 14px;
  border-bottom: 1px dotted #ddd;
  color: #333;
}

.newslayer > p {
  float: left;
  max-width: 490px;
}

.newslayer time {
  float: right;
  font-size: 14px;
  color: #888;
}

.notice {
  width: 350px;
}

.notice .not-content {
  height: 362px;
  padding: 20px;
  background-image: url(../img/lol.png);
  background-repeat: no-repeat;
  background-position: right 20px;
  margin-bottom: 15px;
}

.notice .not-content ul {
  height: 326px;
  overflow: hidden;
}

.notice .not-content li {
  margin-bottom: 14px;
}

.notice .not-content li:before {
  content: "";
  width: 9px;
  height: 9px;
  background-position: -4px -67px;
  vertical-align: 21px;
  margin: 0 5px;
}

.notice .notlayer {
  display: inline-block;
  color: #333;
}

.notice .notlayer p {
  max-width: 182px;
}

.notice .notlayer time {
  font-size: 12px;
  color: #888;
}

.notice .linkout {
  height: 132px;
  width: 100%;
}

.notice .linkout a {
  display: block;
  height: 100%;
  width: 100%;
}

.hot-content .pro {
  width: 353.33333px;
  height: 198px;
  float: left;
  margin-right: 20px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  margin-bottom: 20px;
}

.hot-content .pro:nth-child(3n) {
  margin-right: 0;
}

.hot-content .pro:hover .hover-fla,
.hot-content .pro.active .hover-fla {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  opacity: 1;
}

.hot-content .pro:hover .flax,
.hot-content .pro.active .flax {
  -webkit-transform: translateY(40%);
  transform: translateY(40%);
  opacity: 0;
}

.hot-content .pro .flax {
  background-color: rgba(255, 255, 255, 0.9);
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40%;
  width: 100%;
  padding: 0 20px;
  z-index: 5;
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.hot-content .pro .flax h2 {
  max-width: 290px;
  margin-top: 15px;
  line-height: 170%;
  font-size: 18px;
}

.hot-content .pro .flax p {
  max-width: 300px;
  color: #777;
}

.hot-content .pro .hover-fla {
  position: absolute;
  z-index: 10;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f1f4f9;
  padding: 20px;
  opacity: 0;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.hot-content .pro .hover-fla h2 {
  max-width: 290px;
  margin-top: 0;
  line-height: 210%;
  font-size: 18px;
}

.hot-content .pro .hover-fla p {
  color: #777;
  height: 66px;
  overflow: hidden;
  margin-bottom: 14px;
  margin-top: 7px;
}

.hot-content .pro .hover-fla .pro-link {
  display: block;
  width: 92px;
  height: 32px;
  line-height: 32px;
  background: #596585;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.icon,
.notice .not-content li:before {
  display: inline-block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
}

.add,
.honor,
.line {
  width: 19px;
  height: 19px;
  vertical-align: -5px;
  margin-right: 6px;
}

.add {
  background-position: 0 0;
}

.honor {
  background-position: -19px 0;
}

.line {
  background-position: -38px 0;
}

.inews,
.inot,
.user,
.ihot {
  width: 16px;
  height: 16px;
  vertical-align: 0;
  margin-right: 8px;
}

.inews {
  background-position: -2px -22px;
}

.inot {
  background-position: -21px -22px;
}

.ihot {
  background-position: -40px -22px;
}

.user{
  background-image: url(../img/user.png);
}